<template>
  <div class="ticket-add">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加票务信息</span>
      </div>
      <el-form :model="ticketForm" :rules="rules" ref="ticketForm" label-width="100px">
        <el-form-item label="演唱会名称" prop="concertName">
          <el-input v-model="ticketForm.concertName"></el-input>
        </el-form-item>
        <el-form-item label="演出日期" prop="date">
          <el-date-picker v-model="ticketForm.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="演出时间" prop="time">
          <el-time-picker v-model="ticketForm.time" placeholder="选择时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="票价" prop="price">
          <el-input type="number" v-model.number="ticketForm.price"></el-input>
        </el-form-item>
        <el-form-item label="座位类型" prop="seatType">
          <el-select v-model="ticketForm.seatType" placeholder="请选择座位类型">
            <el-option label="普通座位" value="standard"></el-option>
            <el-option label="VIP座位" value="vip"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="座位号" prop="seatNumber">
          <el-input v-model="ticketForm.seatNumber"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="ticketForm.remarks"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ticketForm')">添加票务</el-button>
          <el-button @click="resetForm('ticketForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TicketAdd', // 组件的名称
  data() { // 组件的初始数据函数
    return {
      // 定义 ticketForm 对象，用于表单数据绑定
      ticketForm: {
        concertName: '', // 演唱会名称
        date: '',        // 演出日期
        time: '',         // 演出时间
        price: 0,         // 票价
        seatType: '',    // 座位类型
        seatNumber: '',  // 座位号
        remarks: '',     // 备注
      },
      // 定义表单验证规则
      rules: {
        concertName: [ // 演唱会名称的验证规则
          { required: true, message: '请输入演唱会名称', trigger: 'blur' }, // 非空验证
        ],
        date: [ // 演出日期的验证规则
          { type: 'date', required: true, message: '请选择演出日期', trigger: 'change' }, // 日期类型和非空验证
        ],
        time: [ // 演出时间的验证规则
          { type: 'date', required: true, message: '请选择演出时间', trigger: 'change' }, // 日期类型和非空验证
        ],
        price: [ // 票价的验证规则
          { required: true, message: '请输入票价', trigger: 'blur' }, // 非空验证
          { type: 'number', message: '票价必须为数字', trigger: 'blur' }, // 数字类型验证
        ],
        seatType: [ // 座位类型的验证规则
          { required: true, message: '请选择座位类型', trigger: 'change' }, // 非空验证
        ],
        seatNumber: [ // 座位号的验证规则
          { required: true, message: '请输入座位号', trigger: 'blur' }, // 非空验证
        ],
      },
    };
  },
  methods: { // 组件的方法
    // 提交表单的方法
    submitForm(formName) {
      // 校验表单
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 如果表单校验成功，弹出提示框
          this.$alert('添加票务成功！', '提示', {
            confirmButtonText: '确定',
            // 点击确定按钮后的回调函数
            callback: action => {
              this.resetForm(formName); // 重置表单
            }
          });
        } else {
          // 如果表单校验失败，显示错误消息
          this.$message.error('添加票务失败，请检查表单信息。');
          return false;
        }
      });
    },
    // 重置表单的方法
    resetForm(formName) {
      this.$refs[formName].resetFields(); // 重置指定的表单项到 `data` 中定义的初始值
    },
  },
};
</script>

<style scoped>
.ticket-add {
  padding: 20px;
}

.box-card {
  width: auto;
  margin-bottom: 10px;
}
</style>